<template>
  <div class="container">
    <div class="register">
      <h3>vivo后台管理系统</h3>
      <el-form label-width="80px" :rules=rules :model="info" ref="formrules">
        <el-form-item label="账号" prop="account">
          <el-input class="input" v-model="info.account" placeholder="请输入账号" clearable>
            <template #prefix>
              <svg class="icon">
                <use xlink:href="#icon-4zhanghu"></use>
              </svg>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input class="input" type="password" v-model="info.password" placeholder="请输入密码" clearable>
            <template #prefix>
              <svg class="icon">
                <use xlink:href="#icon-mima"></use>
              </svg>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rpassword">
          <el-input class="input" type="password" v-model="info.rpassword" placeholder="请确认密码" clearable>
            <template #prefix>
              <svg class="icon">
                <use xlink:href="#icon-querenmima"></use>
              </svg>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button class="btn" type="primary" @click="submitForm(formrules)">注册</el-button>
      <br>
      <el-button class="link" @click="skip" link type="primary">已有账号,登录</el-button>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../tools/axios';
const info = ref({ account: '', password: '', rpassword: '' })
const checkPassword = (rule, value, callback) => {
  if (value !== info.value.password) {
    callback(new Error('两次密码不一样'))
  } else {
    callback()
  }
}
const rules = ref({
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 10, message: "账号长度应该在3-10", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 10, message: "密码长度应该在3-10", trigger: "blur" },
  ],
  rpassword: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    { validator: checkPassword, trigger: "blur" },
  ]
});
const router = useRouter();
const formrules = ref(null);
const skip = () => {
  router.push('/login');
};
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      let { account, password } = info.value;
      console.log(info.value);
      http.post('/admin/register', info.value).then((res) => {
        console.log(res);
        if (res.code === 0) {
          ElMessage({
            showClose: true,
            message: "注册成功",
            type: "success",
          });
          router.push("/user");

        } else {
          ElMessage({
            showClose: true,
            message: res.desc,
            type: "warning",
          });
        }
      })

      // if (account === "admin" && password === "123456") {

      // } else {

      // }
    } else {
      console.log("error submit!", fields);
      ElMessage({
        showClose: true,
        message: "账号或密码格式错误",
        type: "error",
      });
    }
  });
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('https://passport.douguo.com/public/img/web/sinin.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register {
  width: 400px;
  box-sizing: border-box;
  padding: 35px 60px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px #ddd;
}

.register h3 {
  text-align: center;
}

.register label {
  padding-right: 1000px;
}

.register .btn {
  width: 100%;
  margin-bottom: 10px;
}

.register .link {
  float: right;
}

.icon {
  width: 20px;
  height: 20px;
}
</style>
  